<template>
  <div class="all">

    <div class="top_banner" :style="banner_bg">
      <div class="role_name"> {{$store.getters.userInfo.name}} </div>
    </div>

    <div class="button_field">
      <div id="add_user" v-if="show_user" @click="add_user" class="w-flex change_data  ">
        <svg-icon class-name="icon_size" icon-class="add" />
        <div class="v_height"> 新增加盟商 </div>
      </div>

      <search v-if="show_user" />
      <div @click="change_show" class="change_data ">

        <svg-icon class-name="icon_size" icon-class="roles" />
        <div class="v_height"> {{show_user ? "显示数据" : "显示人群"}} </div>
      </div>

    </div>
    <div v-show="!show_user" class="on_off">

      <total_data @signList="signList" @wait_devide="wait_devide" />
      <line_chart />
      <business_table />
      <Sale_report />
    </div>
    <list class="car_list" v-show="show_user" />
    <Out_sky :type="type" :show_add.sync="show_add" />
  </div>
</template>

<script>
  import business_table from './component/business_table.vue'
  import line_chart from './component/line_chart.vue'
  import Sale_report from './component/sale_report.vue'
  import total_data from './component/total_data.vue'
  import search from './component/search/index.vue'
  import list from './component/list/list.vue'

  import Out_sky from './component/form/out_sky.vue'
  export default {
    components: {
      total_data,
      line_chart,
      business_table,
      Sale_report,
      Out_sky,
      search,
      list,
    },
    props: {
      is_user_list: {
        type: Boolean,
        default: false
      }
    },
    beforeRouteEnter(to, from, next) {
      console.log('to', to)
      console.log('from', from)
      if (from.name == 'detail') {
        next(vm => {
          vm.$nextTick(()=>{

            vm.show_user = true
          })
        })
      }
      next()
    },
    watch: {
      "$route.query.is_user_list": {

        handler(newValue) {
          this.show_user = newValue;
        },
        immediate: true,
        deep: true,
      }
    },
    methods: {

      add_user() {
        this.show_add = true;
        this.type = 'add';
      },
      change_show() {
        this.show_user = !this.show_user;
      },
      wait_devide() {
        this.show_user = true;
        this.wait_status = true;
      },
      signList() {
        this.show_user = true;
        this.sign_status = true;
      },
    },
    name: 'home',
    data() {
      return {

        list: [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6],
        show_add: false,
        type: 'add',
        show_user: false,
        sign_status: false,
        wait_status: false,
        value1: 0,
        value2: 'a',
        option1: [{
            text: '渠道经理1',
            value: 0
          },
          {
            text: '渠道经理2',
            value: 1
          },
          {
            text: '渠道经理3',
            value: 2
          },
        ],
        option2: [{
            text: '渠道经理1-1',
            value: 'a'
          },
          {
            text: '渠道经理2-1',
            value: 'b'
          },
          {
            text: '渠道经理3-1',
            value: 'c'
          },
          {
            text: '渠道经理1-2',
            value: 'd'
          },
          {
            text: '渠道经理2-2',
            value: 'e'
          },
          {
            text: '渠道经理3-2',
            value: 'f'
          },
        ],

        banner_bg: {
          background: "url(" + require("@/assets/home/Clip.png") + ")",
          backgroundSize: "100vw auto",
          backgroundRepeat: "no-repeat",
        }
      }
    },
  }
</script>

<style lang="less" scoped>
  // /deep/.van-dropdown-menu__bar {
  //   background-color: #f3f5f7;
  //   box-shadow: none;
  // }

  // /deep/.van-dropdown-menu__item {
  //   border-radius: 8px;
  //   flex-basis: 200px;
  //   height: 80px;
  //   margin-left: 25px;
  //   margin-right: 25px;
  //   margin-top: -50px;
  //   background-color: rgba(255, 255, 255, 1);
  //   color: rgba(102, 102, 102, 1);
  // }

  // /deep/.van-ellipsis {
  //   height: 30px;
  // }

  // /deep/.van-dropdown-menu__title {

  //   font-size: 26px !important;
  //   line-height: 30px;
  // }

  // /deep/.van-dropdown-item__option {
  //   font-size: 26px;
  // }

  .all {
    margin: 0;
    padding: 0;
    background-color: #f3f5f7;
    height: 100%;
    box-sizing: border-box;
    user-select: none;

    .search {
      z-index: 9999;
      width: 750px;
    }

    .top_banner {
      height: 120px;
      width: 750px;
      padding-left: 33.41px;
      padding-top: 35px;

      .role_name {
        color: #fff;
        font-size: 28px;

      }

    }

    .button_field {
      width: 750px;
      height: 80px;
      margin-top: -65px;

      display: flex;
      justify-content: flex-end;

      .w-flex {
        flex: 1;
        margin-left: 24px;
      }

      .change_data {
        font-size: 28px;
        margin-top: 25px;
        margin-right: 25px;
        height: 100px;
        line-height: 100px;
        border-radius: 16px;
        padding: 0 20px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;

        .icon_size {
          width: 26px;
          height: 26px;
          margin-right: 12px;
        }
      }
    }

    .on_off {
      padding-left: 24px;
      padding-bottom: 48px;
    }

    .car_list {
      padding-bottom: 24px;
      margin-top: 70px;



    }




  }
</style>